<template>
  <div class="itemMusic">
    <itemMusicTop :playList="playList" :creator="creator" />
    <itemMusicList
      :subscribedCount="playList.subscribedCount"
      :songList="songList"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getMusicItemList, getItemList } from '@/request/api/item'
import itemMusicTop from '../components/item/itemMusicTop.vue'
import itemMusicList from '@/components/item/itemMusicList.vue'
const playList = ref([])
const songList = ref([])
const creator = ref([])
onMounted(async () => {
  const id = useRoute().query.id
  console.log(id)
  console.log(1)
  const res = await getMusicItemList(id)
  console.log(res)
  const result = await getItemList(id)
  console.log(result)
  songList.value = result.data.songs
  playList.value = res.data.playlist
  creator.value = res.data.playlist.creator
  // sessionStorage.setItem('itemDetail', JSON.stringify(playList))
})
</script>
<style lang='scss' scoped>
</style>
